<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套</title>
</head>
<body>
<div id="app">
    <router-link to="/shopping">商场</router-link>
    <router-link to="/zoo">动物园</router-link>
    <router-view></router-view>
</div>

    <template id="shoppingTem">
        <div>
            <h1>我是商场组件</h1>
            <router-link to="/shopping/shoe">鞋店</router-link>
            <router-link to="/shopping/phone">手机店</router-link>
            <router-view></router-view>
        </div>
    </template>



<!--引入js注意顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    const shopping = {
        template:'#shoppingTem'
    }
    const zoo = {
        template: '<h1>我是动物园组件</h1>'
    }
    const shoe = {
        template:'<h2>我是鞋子店</h2>'
    }
    const phone = {
        template:'<h2>我是手机店</h2>'
    }
    const router = new VueRouter({
        routes:[
            {path:'/shopping',component:shopping,
             children:[
            {path:'/shopping/shoe',component:shoe},
            {path:'/shopping/phone',component:phone}]},

            {path:'/zoo',component:zoo}
        ]
    })
    const app = new Vue({
        el:'#app',
        router
    })







</script>
</body>
</html>